<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
    ujt: any;
    opt?: any;
}>();
const { $fn } = props.ujt;
const emit = defineEmits(['onUpload']);
function handleFileChange(e: any) {
    const file: any = e.target.files[0];
    $fn.As.readFile(file).then((res64: any) => {
        $fn.api['webserver']
            .apiPost(
                `/api/asaifile/manage/upbase64/?path=${props.opt.path}`,
                res64
            )
            .then((resup: any) => {
                emit('onUpload', resup?.data);
                rfUploadDom.value.value = '';
            });
    });
}
const rfUploadDom: any = ref(null);
function handleClick() {
    rfUploadDom.value.click();
}
</script>

<template>
    <div class="as-upload-file" @pointerdown="handleClick()">
        <input
            hidden
            ref="rfUploadDom"
            type="file"
            :accept="opt?.accespt || '.zip'"
            @change="handleFileChange"
        />
        <slot>{{ $fn.lg('asai.upload') }}</slot>
    </div>
</template>

<style scoped lang="scss">
.as-upload-file {
    display: inline-block;
    cursor: pointer;
}
</style>
